<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/mdui.min.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/mc-editor.css">
    <title>Tree Hole</title>
</head>

<body id="indexBox"
    class="mdui-theme-primary-purple mdui-theme-accent-pink mdui-appbar-with-toolbar mdui-appbar-with-tab mdui-loaded mdui-drawer-body-left">
    <header class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-toolbar-hide">
        <div class="mdui-toolbar" style="background-color: rgba(255, 255, 255, 0.4);">
            <span class="mdui-btn mdui-btn-icon" mdui-drawer="{target: '#menu', swipe: true}"><i
                    class="mdui-icon material-icons">menu</i></span>
            <a href="javascript:;" class="mdui-typo-title">Tree Hole</a>
            <div class="mdui-toolbar-spacer"></div>
            <div class="mdui-textfield mdui-textfield-expandable mdui-float-right" style="max-width: 400px;">
                <button class="mdui-textfield-icon mdui-btn mdui-btn-icon"><i
                        class="mdui-icon material-icons">search</i></button>
                <input class="mdui-textfield-input" type="text" placeholder="搜索功能暂未开放" />
                <button class="mdui-textfield-close mdui-btn mdui-btn-icon"><i
                        class="mdui-icon material-icons">close</i></button>
            </div>
            <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">refresh</i></a>
            <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">more_vert</i></a>
        </div>

        <div id="tabs" class="mdui-tab mdui-tab-full-width" mdui-tab>
            <a onclick="pageApply.index.card.update()" id="newTab" href="#new" class="mdui-ripple mdui-tab-active"><i
                    id="newTab" class="mdui-icon material-icons">new_releases</i><label id="newTab">最新</label></a>
            <a onclick="pageApply.index.card.update()" id="hotTab" href="#hot" class="mdui-ripple"><i id="hotTab"
                    class="mdui-icon material-icons">whatshot</i><label id="hotTab">热门</label></a>
            <a onclick="pageApply.index.card.update()" id="aboutMeTab" href="#aboutMe" class="mdui-ripple"><i
                    id="aboutMeTab" class="mdui-icon material-icons">info_outline</i><label
                    id="aboutMeTab">与我相关</label></a>
        </div>
    </header>
    <div id="menu" class="mdui-drawer">
        <div class="mdui-list" mdui-collapse="{accordion: true}" style="margin-bottom: 136px;">
            <li class="mdui-list-item mdui-ripple mdui-collapse-item">
                <i class="mdui-list-item-icon mdui-icon material-icons">move_to_inbox</i>
                <div class="mdui-list-item-content">Inbox</div>
            </li>
            <li class="mdui-list-item mdui-ripple">
                <i class="mdui-list-item-icon mdui-icon material-icons">send</i>
                <div class="mdui-list-item-content">Outbox</div>
            </li>
            <li class="mdui-list-item mdui-ripple">
                <i class="mdui-list-item-icon mdui-icon material-icons">delete</i>
                <div class="mdui-list-item-content">Trash</div>
            </li>
            <li class="mdui-list-item mdui-ripple">
                <i class="mdui-list-item-icon mdui-icon material-icons">error</i>
                <div class="mdui-list-item-content">Spam</div>
            </li>
        </div>
    </div>
    <div id="mainPage" style="overflow-y: auto; position: relative; top: 30px;">
        <div class="mdui-container mdui-center">
            <div class="mdui-row">
                <div class="mdui-row-xs-1 mdui-row-sm-2 mdui-row-md-3 mdui-row-lg-3 mdui-row-xl-4">
                    <div id="new">
                        <div class="mdui-card mdui-col" style="margin-top: 10px;">

                            <!-- 卡片头部，包含头像、标题、副标题 -->
                            <div class="mdui-card-header">
                                <img class="mdui-card-header-avatar" src="bg.jpg" />
                                <div class="mdui-card-header-title">Title</div>
                                <div class="mdui-card-header-subtitle">Subtitle</div>
                            </div>

                            <!-- 卡片的媒体内容，可以包含图片、视频等媒体内容，以及标题、副标题 -->
                            <div class="mdui-card-media">
                                <img src="bg.jpg" />

                                <!-- 卡片中可以包含一个或多个菜单按钮 -->
                                <div class="mdui-card-menu">
                                    <button class="mdui-btn mdui-btn-icon mdui-text-color-white"><i
                                            class="mdui-icon material-icons">share</i></button>
                                </div>

                                <!-- 嵌套卡片标题与副标题 -->
                                <div class="mdui-card-media-covered">

                                    <!-- 卡片的标题和副标题 -->
                                    <div class="mdui-card-primary">
                                        <div class="mdui-card-primary-title">Title</div>
                                        <div class="mdui-card-primary-subtitle">Subtitle</div>
                                    </div>
                                </div>
                            </div>

                            <!-- 卡片的内容 -->
                            <div class="mdui-card-content mdui-text-truncate">
                                <a>子曰：「学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知，而不愠，不亦君子乎？」</a>
                            </div>

                            <!-- 卡片的按钮 -->
                            <div class="mdui-card-actions">
                                <button class="mdui-btn mdui-ripple"><i
                                        class="mdui-icon material-icons">favorite</i></button>
                                <button class="mdui-btn mdui-ripple"><i
                                        class="mdui-icon material-icons">reply</i></button>
                                <button class="mdui-btn mdui-btn-icon mdui-float-right"><i
                                        class="mdui-icon material-icons">expand_more</i></button>
                            </div>


                        </div>
                        <div class="mdui-card mdui-col" style="margin-top: 10px;">

                            <!-- 卡片头部，包含头像、标题、副标题 -->
                            <div class="mdui-card-header">
                                <i class="mdui-icon material-icons mdui-card-header-avatar">person</i>
                                <div class="mdui-card-header-title">Anonymous</div>
                                <div class="mdui-card-header-subtitle">Unknown</div>
                            </div>

                            <!-- 卡片的媒体内容，可以包含图片、视频等媒体内容，以及标题、副标题 -->
                            <div class="mdui-card-media">
                                <img src="bg.jpg" />

                                <!-- 卡片中可以包含一个或多个菜单按钮 -->
                                <div class="mdui-card-menu">
                                    <button class="mdui-btn mdui-btn-icon mdui-text-color-white"><i
                                            class="mdui-icon material-icons">share</i></button>
                                </div>

                                <!-- 嵌套卡片标题与副标题 -->
                                <div class="mdui-card-media-covered">

                                    <!-- 卡片的标题和副标题 -->
                                    <div class="mdui-card-primary">
                                        <div class="mdui-card-primary-title">Title</div>
                                        <div class="mdui-card-primary-subtitle">Subtitle</div>
                                    </div>
                                </div>
                            </div>

                            <!-- 卡片的内容 -->
                            <div class="mdui-card-content mdui-text-truncate">
                                子曰：「学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知，而不愠，不亦君子乎？」</div>

                            <!-- 卡片的按钮 -->
                            <div class="mdui-card-actions">
                                <button class="mdui-btn mdui-ripple"><i
                                        class="mdui-icon material-icons">favorite</i></button>
                                <button class="mdui-btn mdui-ripple"><i
                                        class="mdui-icon material-icons">reply</i></button>
                                <button class="mdui-btn mdui-btn-icon mdui-float-right"><i
                                        class="mdui-icon material-icons">expand_more</i></button>
                            </div>


                        </div>
                        <div class="mdui-card mdui-col" style="margin-top: 10px;">

                            <!-- 卡片头部，包含头像、标题、副标题 -->
                            <div class="mdui-card-header">
                                <img class="mdui-card-header-avatar" src="bg.jpg" />
                                <div class="mdui-card-header-title">Title</div>
                                <div class="mdui-card-header-subtitle">Subtitle</div>
                            </div>

                            <!-- 卡片的媒体内容，可以包含图片、视频等媒体内容，以及标题、副标题 -->
                            <div class="mdui-card-media">
                                <img src="bg.jpg" />

                                <!-- 卡片中可以包含一个或多个菜单按钮 -->
                                <div class="mdui-card-menu">
                                    <button class="mdui-btn mdui-btn-icon mdui-text-color-white"><i
                                            class="mdui-icon material-icons">share</i></button>
                                </div>

                                <!-- 嵌套卡片标题与副标题 -->
                                <div class="mdui-card-media-covered">

                                    <!-- 卡片的标题和副标题 -->
                                    <div class="mdui-card-primary">
                                        <div class="mdui-card-primary-title">Title</div>
                                        <div class="mdui-card-primary-subtitle">Subtitle</div>
                                    </div>
                                </div>
                            </div>

                            <!-- 卡片的内容 -->
                            <div class="mdui-card-content mdui-text-truncate">
                                子曰：「学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知，而不愠，不亦君子乎？」</div>

                            <!-- 卡片的按钮 -->
                            <div class="mdui-card-actions">
                                <button class="mdui-btn mdui-ripple"><i
                                        class="mdui-icon material-icons">favorite</i></button>
                                <button class="mdui-btn mdui-ripple"><i
                                        class="mdui-icon material-icons">reply</i></button>
                                <button class="mdui-btn mdui-btn-icon mdui-float-right"><i
                                        class="mdui-icon material-icons">expand_more</i></button>
                            </div>


                        </div>
                        <div class="mdui-card mdui-col" style="margin-top: 10px;">

                            <!-- 卡片头部，包含头像、标题、副标题 -->
                            <div class="mdui-card-header">
                                <img class="mdui-card-header-avatar" src="bg.jpg" />
                                <div class="mdui-card-header-title">Title</div>
                                <div class="mdui-card-header-subtitle">Subtitle</div>
                            </div>

                            <!-- 卡片的媒体内容，可以包含图片、视频等媒体内容，以及标题、副标题 -->
                            <div class="mdui-card-media">
                                <img src="bg.jpg" />

                                <!-- 卡片中可以包含一个或多个菜单按钮 -->
                                <div class="mdui-card-menu">
                                    <button class="mdui-btn mdui-btn-icon mdui-text-color-white"><i
                                            class="mdui-icon material-icons">share</i></button>
                                </div>

                                <!-- 嵌套卡片标题与副标题 -->
                                <div class="mdui-card-media-covered">

                                    <!-- 卡片的标题和副标题 -->
                                    <div class="mdui-card-primary">
                                        <div class="mdui-card-primary-title">Title</div>
                                        <div class="mdui-card-primary-subtitle">Subtitle</div>
                                    </div>
                                </div>
                            </div>

                            <!-- 卡片的内容 -->
                            <div class="mdui-card-content mdui-text-truncate">
                                子曰：「学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知，而不愠，不亦君子乎？」</div>

                            <!-- 卡片的按钮 -->
                            <div class="mdui-card-actions">
                                <button class="mdui-btn mdui-ripple"><i
                                        class="mdui-icon material-icons">favorite</i></button>
                                <button class="mdui-btn mdui-ripple"><i
                                        class="mdui-icon material-icons">reply</i></button>
                                <button class="mdui-btn mdui-btn-icon mdui-float-right"><i
                                        class="mdui-icon material-icons">expand_more</i></button>
                            </div>


                        </div>
                    </div>

                    <div id="hot">

                    </div>

                    <div id="aboutMe">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mdui-fab-wrapper" id="fab" mdui-fab="{}">
        <button class="mdui-fab mdui-ripple mdui-color-pink-accent">
            <i class="mdui-icon material-icons">add</i>
            <i class="mdui-icon mdui-fab-opened material-icons">remove</i>
        </button>
        <div class="mdui-fab-dial">
            <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-orange"><i
                    class="mdui-icon material-icons">bookmark</i></button>
            <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-blue"><i class="mdui-icon material-icons"
                    mdui-dialog="{target: '#edit'}">edit</i></button>
        </div>
    </div>

    <div class="mdui-dialog mc-editor-dialog with-title" id="edit" style="display: none;">
        <input id="title" type="text" class="title" placeholder="标题 - 副标题（可空）" maxlength="50">
        <div class="mc-editor">
            <div class="content mdui-typo content-empty" contenteditable="" placeholder="说点什么吧~"
                onkeypress="$(this).attr('placeholder','')">
                <p><br></p>
            </div>
            <div class="toolbar"><button class="mdui-btn mdui-btn-icon mdui-ripple close" mdui-dialog-close="true"><i
                        class="mdui-icon material-icons" title="关闭">close</i></button>
                <div class="mdui-toolbar-spacer"></div><button type="button"
                    class="submit-text mdui-btn mdui-btn-raised mdui-color-indigo mdui-color-theme">发布</button>
                <button type="button"
                    class="submit-icon mdui-btn mdui-btn-icon mdui-text-color-indigo mdui-text-color-theme"><i
                        class="mdui-icon material-icons" title="发布">send</i></button><button
                    class="mdui-btn menu menu-bold" type="button" title="粗体"><i
                        class="mdui-icon material-icons">format_bold</i></button><button
                    class="mdui-btn menu menu-italic" type="button" title="斜体"><i
                        class="mdui-icon material-icons">format_italic</i></button>
                <div class="divider"></div><button class="mdui-btn menu menu-head" type="button" title="标题"><i
                        class="mdui-icon material-icons">title</i></button><button class="mdui-btn menu menu-code"
                    type="button" title="代码块"><i class="mdui-icon material-icons">code</i></button><button
                    class="mdui-btn menu menu-ol" type="button" title="有序列表"><i
                        class="mdui-icon material-icons">format_list_numbered</i></button><button
                    class="mdui-btn menu menu-ul" type="button" title="无序列表"><i
                        class="mdui-icon material-icons">format_list_bulleted</i></button>
                <div class="divider"></div><button class="mdui-btn menu menu-link" type="button" title="插入链接"><i
                        class="mdui-icon material-icons">link</i></button><button class="mdui-btn menu menu-image"
                    type="button" title="插入图片"><i class="mdui-icon material-icons">image</i></button>
                <div class="mdui-toolbar-spacer"></div>
                <div class="divider"></div><button class="mdui-btn menu menu-clear_drafts" type="button" title="舍弃草稿"><i
                        class="mdui-icon material-icons">delete</i></button>
            </div>
        </div>
    </div>



    <script src="js/mdui.js"></script>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/method.js"></script>
    <script src="js/index.js"></script>



</body>

</html>